<template>
    <div class="Myfollow">
        <div class="follow-head">
         <van-nav-bar 
        left-arrow
        @click-left="goTo"
        title="我的关注"
       
        >

        </van-nav-bar>
        </div>


        <div class="follow-main">
            <div class="user-box" v-for="(item,index) in usermsg" :key="index">
                <div class="Personal" >
                    <div class="icon"><img :src="item.avatar" alt=""></div>
                    <div class="mseg">
                        <div class="name">{{item.username}}</div>
                        <div class="jieshao">{{item.occupation}}  <span v-if="item.location&&item.location.province">·{{item.location.province.name}} </span> <span v-if="item.count"> · 粉丝 {{item.count.count_follower}} </span>  </div>
                    </div>
                </div>
                <div class="guanzhu">已关注</div>
            </div>

        </div>


    </div>
</template>

<script>
    export default {
        name:'Myfollow',
        data(){
            return{
                usermsg:[],

            }
        },

        created(){
            
            
            if(this.$route.query.id==null){
                
                return;
            }else{

        
            for(let i=0;i<this.$route.query.id.length;i++){
                
                this.axios({
                 url:'https://apis.netstart.cn/xpc/user/'+this.$route.query.id[i]
                }).then(result=>{
                if(result.status==200){
                    this.usermsg.unshift(result.data.data)
                    
              
                }
            })
            }
            }
        },


        methods:{
            goTo(){
                this.$router.go(-1)
            }

        }


    }
</script>

<style lang="less" >

    .Myfollow{

        .follow-head{
            
            .van-nav-bar .van-icon {
                color: #000000;
            }

        }

        .follow-main{
            padding: 20px;
            box-sizing: border-box;
            .user-box{
               display: flex;
               justify-content: space-between;
               align-items: center;
                width: 100%;
                height: 80px;
                // background-color: antiquewhite;
                border-bottom: 1px solid #dddddd;
                

                .Personal{
                    
                    height: 100%;
                    display: flex;
                     align-items: center;
                    .icon{
                        width: 50px;
                        height: 50px;
                        
                        border-radius: 50%;

                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }    

                    }
                    .mseg{
                        margin-left: 10px;
                        width: 200px;
                        height: 50px;
                        
                    .name{
                        font-size: 14px;
                        font-weight: 600;
                        margin: 5px 0px;
                        width: 100%;
                        height: 20px;
                        line-height: 20px;
                    }
                    .jieshao{
                        color: #b8adad;
                        line-height: 20px;
                        width: 100%;
                        height: 20px;
                    }

                    }
                }

                .guanzhu{
                    width: 70px;
                    height: 28px;
                    background-color: #e0e0e0;
                    color: #aaaaaa;
                    border-radius: 15px;
                    text-align: center;
                    line-height: 28px;
                }


            }

        }

    }


</style>